export default {
  data: () => ({ menu: [] }),
  props: {
    loadMenu: { type: Function, default: () => Promise.resolve([]), required: true },
    renderIcon: { type: Function },
    collapse: { type: Boolean, default: false },
    uniqueOpened: { type: Boolean, default: true },
    activeMenu: { type: String, default: '' },
    asideBackground: { type: String, default: '#1F2124' },
    asideActiveTextColor: { type: String, default: '#A99A53' },
    asideClassName: { type: String, default: '' },
    contentClassName: { type: String, default: '' },
    asideTransition: 'width 0.2s cubic-bezier(0, 0, 0, 1.08)'
  },
  mounted() {
    this.getMenus()
  },
  methods: {
    getMenus() {
      this.loadMenu?.({
        resolve: (menu: any[]) => {
          this.menu = menu
        }
      })
    }
  },
  render(h: any) {
    return h('div', { class: 'h-full flex overflow-hidden' }, [
      h(
        'div',
        {
          style: { transition: this.asideTransition },
          class: ['h-full transition-[width] max-w-[300px] flex bg-[#1F2124] flex-col relative', this.asideClassName]
        },
        [
          h('router-link', { props: { to: '/' }, class: 'h-[60px] flex items-center justify-center cursor-pointer' }, [
            this.$scopedSlots?.logo?.()
          ]),
          h('div', { class: 'flex-grow overflow-y-auto overflow-x-hidden' }, [
            h(
              'el-menu',
              {
                class: 'overflow-x-hidden !border-r-[#1F2124]',
                props: {
                  collapse: this.collapse,
                  uniqueOpened: this.uniqueOpened,
                  defaultActive: this.activeMenu,
                  backgroundColor: this.asideBackground,
                  textColor: '#fff',
                  activeTextColor: this.asideActiveTextColor
                }
              },
              this.menu?.map((m: Record<string, any>) =>
                h('menu-item', {
                  on: { click: (_m: any) => this.$emit('menu-click', _m) },
                  props: { menu: m, renderIcon: (mm: any) => this.$scopedSlots?.icon?.(mm) },
                  key: m.path
                })
              )
            )
          ]),
          h('div', { class: this.collapse ? 'h-[120px] flex flex-col' : 'h-aside flex justify-between' }, [
            h('div', { class: 'h-[60px] w-aside flex items-center justify-center' }, [
              h('el-popconfirm', {
                on: { confirm: () => this.$emit('logout') },
                props: { title: '是否确认退出?', placement: 'right' },
                scopedSlots: {
                  reference: () =>
                    h('span', { class: 'h-aside w-aside flex items-center cursor-pointer justify-center' }, [
                      this.$scopedSlots?.avatar?.()
                    ])
                }
              })
            ]),
            h(
              'div',
              {
                on: { click: () => this.$emit('toggle') },
                class: 'h-[60px] cursor-pointer w-aside flex items-center justify-center'
              },
              [this.$scopedSlots?.toggle?.()]
            )
          ])
        ]
      ),
      h('div', { class: ['flex-grow h-full transition-all p-[10px]', this.contentClassName] }, [this.$slots?.default])
    ])
  }
}
